<template>
	<view class="orderContainer">
		<view class="navBarContainer">
			<view class="navBar">
				<view class="back" @click="goBack">
					<view class="iconContainer">
						<u-icon name="arrow-left" size="20"></u-icon>
					</view>
				</view>
				<text class="title">我的订单</text>
				<view class="other">
					
				</view>
			</view>
		</view>
		<view class="allOrders">
			<view class="noOrder" v-if="allOrder.length==0">
				<view class="backImg">
					
				</view>
				<view class="goOrder" @click="gotoOrder">
					去下单
				</view>
			</view>
			<view class="order" v-for="(order,index) in allOrder" :key="index" v-if="allOrder.length!=0">
				<view class="locInfoContainer">
					<view class="locContainer">
						<view class="locInfo">
							<view class="method">
								自提
							</view>
							<view class="loc">
								{{storeInfo.shop_name}}
							</view>
						</view>
						<view class="time">
							{{order.order_time}}
						</view>
					</view>
					<view class="orderStatus">
						<view v-if="order.status==1">
							待付款
						</view>
						<view v-if="order.status==3">
							制作中
						</view>
						<view v-if="order.status==4">
							请取餐
						</view>
						<view v-if="order.status==5">
							已完成
						</view>
						<view v-if="order.status==6">
							已取消
						</view>
						<view v-if="order.status==7">
							已退款
						</view>
						<view v-if="order.status==2">
							申请退款中...
						</view>
						<view class="icon" @click="gotoOrderInfo(order.id)" v-if="order.status!=1&&order.status!=6&&order.status!=7&&order.status!=2">
							<u-icon name="arrow-right" size="13"></u-icon>
						</view>
					</view>
				</view>
				<view class="orderContent">
					<scroll-view class="foodContent" :scroll-x="true">
						<view class="images">
							<view class="image" v-for="(img,index) in order.orderDetailList"  :key="index" :style="[{backgroundImage:'url('+img.image+')'}]">
								
							</view>
						</view>
					</scroll-view>
					<view class="priceContainer">
						<view class="price">
							￥{{order.amount}}
						</view>
						<view class="num">
							共{{order.orderDetailList.length}}件
						</view>
					</view>
				</view>
				<view class="moreContainer">
					<view class="refundContainer">
						<text v-if="order.status==7" style="color:green">{{order.shop_reply}}</text>
						<text v-if="order.shop_reply&&order.status!=7" style="color:red">驳回原因: {{order.shop_reply}}</text>
					</view>
					<view class="operateContainer">
						<view class="cancelOrder" v-if="order.status==1" @click="cancelShow(order.id)">
							取消订单
						</view>
						<view class="cancelOrder" v-if="order.status==3" @click="cancelShow(order.id)">
							申请退款
						</view>
						<view class="pay" v-if="order.status==1" @click="goPay(order.id,order.amount,order.number)">
							去支付
						</view>
						<view class="more" @click="gotoMeal(order.id)" v-if="order.status==1||order.status==3||order.status==4||order.status==5">
							再来一单
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="center">
			<view class="popContent">
				<view class="title">
					请填写原因
				</view>
				<view class="inputContent">
					<u--input
					    placeholder="请输入原因"
					    border="surround"
					    v-model="cancelContent"
					  ></u--input>
				</view>
				<view class="cancelOperateContainer">
					<view class="cancelBtn" @click="cancel">返回</view>
					<view class="confirmBtn" @click="confirm()"
					>确定</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allOrder:[],
				show:false,
				cancelContent:'',
				cancelId:'',
				storeInfo:''
			}
		},
		methods: {
			close(){
				this.show=false
			},
			cancel(){
				this.show=false
			},
			goBack(){
				uni.navigateBack()
			},
			gotoOrder(){
				uni.navigateTo({
					url:'../orderMeal/orderMeal'
				})
			},
			cancelShow(id){
				this.cancelId=id
				this.show=true
			},
			confirm(){
				if(this.cancelContent){
					uni.request({
						url:`http://localhost:8080/kfc//user/order/cancel?id=${this.cancelId}&cancelReason=${this.cancelContent}`,
						method:'get',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('取消成功',res.data)
							uni.request({
								url:'http://localhost:8080/kfc/user/order/history',
								header:{
									token:uni.getStorageSync('STATE_KEY').token
								},
								method:'get',
								success:(res)=>{
									console.log('订单历史',res.data.data)
									this.allOrder=res.data.data.reverse()
								}
							})
							this.show=false
							this.$refs.uToast.show({
								type: 'success',
								title: '取消成功',
								message: "感谢您提出的建议，我们将继续努力！",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
							})
							this.$forceUpdate()
						}
					})
				}
				else{
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						title: '请输入取消原因',
						message: '请输入取消原因',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					})
				}
			},
			gotoMeal(id){
				uni.request({
					url:`http://localhost:8080/kfc/user/order/repetition?id=${id}`,
					method:'get',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					success:(res)=>{
						console.log('再来一单',res.data)
						uni.navigateTo({
							url:'../orderMeal/orderMeal'
						})
					}
				})
			},
			gotoOrderInfo(id){
				uni.navigateTo({
					url:`../orderMeal/orderInfo?id=${id}`
				})
			},
			goPay(id,amount,number){
				uni.navigateTo({
					url:`../orderMeal/orderPay?id=${id}&amount=${amount}&orderNumber=${number}`
				})
			}
		},
		mounted(){
			uni.request({
				url:'http://localhost:8080/kfc/user/order/history',
				header:{
					token:uni.getStorageSync('STATE_KEY').token
				},
				method:'get',
				success:(res)=>{
					console.log('订单历史',res.data.data)
					this.allOrder=res.data.data.reverse()
				}
			})
			uni.request({
				url:'http://localhost:8080/kfc/shop',
				method:'get'
			}).then(res=>{
				console.log('店铺信息',res.data.data)
				this.storeInfo=res.data.data
			})
		}
	}
</script>

<style>
	page{
		background-color: rgb(245,245,245);
	}
</style>

<style lang="scss" scoped>
	.orderContainer{
		.navBarContainer{
			width: 100vw;
			height: 200rpx;
			position: fixed;
			z-index: 99;
			top:0rpx;
			left: 0;
			background-color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			// margin-top: 30rpx;
			.navBar{
				width: 90%;
				margin: 0 auto;
				margin-top: 100rpx;
				background-color: #FFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.back,.other{
					width: 70rpx;
				}
				.title{
					font-size: 30rpx;
				}
			}
		}
		.allOrders{
			margin-top: 220rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.noOrder{
				display: flex;
				flex-direction: column;
				align-items: center;
				.backImg{
					background-image: url(../../static/homePage/back.png);
					width: 300rpx;
					height: 400rpx;
					background-position: center;
					background-size: contain;
					background-repeat: no-repeat;
					margin-top: 200rpx;
				}
				.goOrder{
					margin-top: 30rpx;
					width: 300rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color:#FFF;
					border-radius: 20rpx;
					background-color: rgb(228,0,48);
				}
			}
			>.order{
				background-color: #FFF;
				width: 710rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				>view{
					width: 670rpx;
				}
				.locInfoContainer{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					.locContainer{
						display: flex;
						flex-direction: column;
						.locInfo{
							display: flex;
							align-items: center;
							.method{
								width: 60rpx;
								height: 40rpx;
								border: 1px solid rgb(228,0,48);
								background-color: rgb(252,229,234);
								border-radius: 10rpx;
								display: flex;align-items: center;justify-content: center;
								font-size: 22rpx;
								color:rgb(228,0,48);
							}
							.loc{
								font-size: 28rpx;
								margin-left: 10rpx;
							}
						}
						.time{
							font-size: 22rpx;
							color:#999999;
							margin-top: 8rpx;
						}
					}
					.orderStatus{
						display: flex;
						align-items: center;
						font-size: 26rpx;
						view{
							margin-left: 8rpx;
						}
					}
				}
				.orderContent{
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.foodContent{
						width: 300rpx;
						height: 150rpx;
						// background-color: aliceblue;
						// overflow-x: scroll;
						// display: flex;
						// align-items: center;
						// overflow: hidden;
						.images{
							height: 100%;
							width: 550rpx;
							.image{
								background-position: center;
								background-size: cover;
								margin-right: 10rpx;
								float: left;
								height: 90rpx;
								width: 120rpx;
							}
						}
					}
					.priceContainer{
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						.price{
							font-weight: bold;
							font-size: 30rpx;
						}
						.num{
							color:#999999;
							margin-top: 8rpx;
							font-size: 24rpx;
						}
					}
				}
				.moreContainer{
					margin-top: 40rpx;
					margin-bottom: 50rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.refundContainer{
						width: 260rpx;
					}
					.operateContainer{
						display: flex;
						align-items: center;
					}
					.more{
						font-size: 26rpx;
						border-radius: 10rpx;
						width: 160rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid rgb(228,0,48);
						background-color: rgb(228,0,48);
						margin-left: 10rpx;
						color:#FFF;
					}
					.pay{
						font-size: 26rpx;
						border-radius: 10rpx;
						width: 160rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid rgb(199,199,199);
						margin-left: 10rpx;
					}
					.cancelOrder{
						font-size: 26rpx;
						border-radius: 10rpx;
						width: 160rpx;
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid rgb(199,199,199);
					}
				}
			}
		}
	}
	.popContent{
		display: flex;
		flex-direction: column;
		align-items: center;
		.title{
			margin-top: 40rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			font-size: 36rpx;
		}
		.inputContent{
			margin-top: 30rpx;
			width: 400rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
		.cancelOperateContainer{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			>view{
				width: 120rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}
			.cancelBtn{
				border: 1px solid #999999;
			}
			.confirmBtn{
				border:1px solid rgb(228,0,48);
				background-color: rgb(228,0,48);
				color:#FFF;
				margin-left: 30rpx;
			}
		}
	}
</style>
